<template>
	<view class="main">
		<view class="header">
			<u-navbar
			title=" " 
			:is-back="false"
			back-icon-color="#ffffff"
			title-color="#ffffff"
			title-size="34"
			:border-bottom="false"
			:background="background">
				<view class="header-cont">
					<view class="title">个人主页</view>
					<view class="right-btn" @tap="toPage('/pages/SignUp/index')">签约接单</view>
				</view>
			</u-navbar>
			<view class="userInfo" @tap="toPage('/pages/User/userInfo',false)">
				<view class="user">
					<image src="" mode="" class="avatar"></image>
					<view class="cont">
						<view class="job_title">
							<text>北京小小萌科技有限公司</text>
						</view>
						<view class="name">登录</view>
						<view class="des">登录后解锁更多功能</view>
					</view>
					
				</view>
				<view class="next">
					<text>编辑资料</text>
					<u-icon name="arrow-right" color="#8FC2FF" size="28"></u-icon>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="tabNav">
				<view class="item" @tap="toPage('/pages/Mine/tabDetail?id=0')">
					<view class="number">0</view>
					<view class="title">待办</view>
				</view>
				<view class="item" @tap="toPage('/pages/Mine/tabDetail?id=1')">
					<view class="number">0</view>
					<view class="title">沟通</view>
				</view>
				<view class="item" @tap="toPage('/pages/Mine/tabDetail?id=2')">
					<view class="number">0</view>
					<view class="title">工作</view>
				</view>
				<view class="item">
					<view class="number">0</view>
					<view class="title">发布</view>
				</view>
			</view>
			<view class="cont u-m-b-20">
				<cell 
				url="/pages/Certification/enterAuth"
				ico="../../static/image/ico/qyrz.png"
				title="企业认证"
				:borderBtm="true"
				des="已认证"></cell>
				<cell
				url="/pages/Certification/creditCertification"
				ico="../../static/image/ico/qyrz.png"
				title="信用认证"
				:borderBtm="true"
				desColor="#C7C7C7"
				des="完成信用认证,提高接单效率"></cell>
				<cell
				url="/pages/Account/index"
				ico="../../static/image/ico/zjzh.png"
				title="资金账户"
				:borderBtm="true"
				des=""></cell>
				<cell
				url="/pages/Mine/favorites"
				ico="../../static/image/ico/wdsc.png"
				title="我的收藏"
				:borderBtm="false"
				des=""></cell>
			</view>
			<view class="cont">
				<cell 
				url="/pages/Mine/identity"
				ico="../../static/image/ico/sfqh.png"
				title="身份切换"
				:borderBtm="true"
				des="开发者"></cell>
				<cell
				url="/pages/Mine/help"
				ico="../../static/image/ico/bzzx.png"
				title="帮助中心"
				:borderBtm="true"
				des=""></cell>
				<cell
				url="/pages/Mine/site"
				ico="../../static/image/ico/zhsz.png"
				title="账户设置"
				:borderBtm="false"
				des=""></cell>
			</view>
		</view>
		<Nav></Nav>
	</view>
</template>

<script>
	import Nav from "@/components/Nav.vue"
	import Cell from "@/components/Cell.vue"
	export default {
		components:{
			Nav,
			Cell
		},
		data() {
			return {
				background: {
					backgroundColor:"#4A90E2"
				},
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onPullDownRefresh() {
		    console.log('refresh');
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		methods: {
			toPage(url,islogin=false){
				if(islogin){
					uni.navigateTo({
					    url: '/pages/Login/index'
					});
					return
				}
				uni.navigateTo({
				    url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #f9f9f9;
		.header{
			width: 100%;
			height: calc(var(--status-bar-height) + 444rpx);
			background-color: #4A90E2;
			padding: 30rpx;
			.header-cont{
				flex: 1;
				padding: 0 30rpx;
				position: relative;
				.title{
					font-size: 34rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 34rpx;
					text-align: center;
				}
				.right-btn{
					position: absolute;
					right: 30rpx;
					top:0;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			}
			.userInfo{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				.user{
					display: flex;
					align-items: center;
					.avatar{
						width: 145rpx;
						height: 145rpx;
						border-radius: 50%;
						background: #f9f9f9;
					}
					.cont{
						margin-left: 25rpx;
						.job_title{
							font-size: 22rpx;
							font-weight: 500;
							color: #94E1FF;
							line-height: 34rpx;
							background: rgba(42, 115, 200, 0.31) url(../../static/image/ico/qiyerenzheng.png)16rpx center no-repeat;
							background-size: 20rpx 24rpx;
							border-radius: 23rpx;
							// opacity: 0.31;
							padding: 5rpx 30rpx 5rpx 55rpx;
							margin-bottom: 15rpx;
						}
						.name{
							font-size: 36rpx;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 50rpx;
						}
						.des{
							font-size: 26rpx;
							color: #FFFFFF;
							line-height: 34rpx;
						}
					}
				}
				.next{
					display: flex;
					align-items: center;
					text{
						font-size: 24rpx;
						color: #8FC2FF;
						line-height: 33rpx;
					}
				}
			}
		}
		.content{
			padding: 90rpx 30rpx 0 30rpx;
			position: relative;
			.tabNav{
				width: calc(100% - 60rpx);
				position: absolute;
				left: 30rpx;
				top:-70rpx;
				height: 142rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.item{
					flex: 1;
					text-align: center;
					.number{
						font-size: 36rpx;
						font-weight: 500;
						color: #888888;
						line-height: 50rpx;
					}
					.title{
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
						line-height: 37rpx;
						margin-top: 10rpx;
					}
				}
			}
			.cont{
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 15rpx 20rpx;
				
			}
		}
	}
	
</style>
